<template>
  <div id="echart4" class="echarts-style">
  </div>
</template>

<script>
  export default {
    name: 'cureNum',
    props: ["dataList"],
    data() {
      return {
        myChart: null,
      }
    },
    watch: {
      dataList(newVal) {
        this.initCurecharts()
      }
    },
    mounted() {

      this.initCurecharts()
      window.addEventListener("resize", () => {
        this.myChart.resize()
      })
    },
    unmounted() {
      this.myChart.destory()

    },
    methods: {
      initCurecharts() {
        this.myChart = this.$echarts.init(
          document.getElementById("echart4")
        );
        var colorList = ["#667FCC", "#EF0C27", "#FEE7EA"];
        let xList = [],
          data = []
        this.dataList.list.map(item => {
          xList.push(item.treatTime)
          data.push(item.num)
        })
        var option = {
          title: [{
              text: `使用时长`,
              // subtext:'单位：小时',
              left: 30,
              textStyle: {
                fontWeight: 600,
                color: "#333333",
                fontSize: 20,
              },
            },
            {
              text: `单位：小时`,
              left: 30,
              top: 30,
              textStyle: {
                fontWeight: 400,
                color: "#333333",
                fontSize: 18,
              },
            },
            {
              text: "累计使用次数："+this.dataList.cnum+"次",
              right: 20,
              textStyle: {
                fontWeight: 400,
                color: "#333333",
                fontSize: 18,
              }
            }
          ],
          color: colorList,
          xAxis: {
            type: 'category',
            data: xList,
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: data,
            type: 'line',
            areaStyle: {
              normal: {
                color: {
                  type: 'linear', //设置区域线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#74B7FF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FBFDFF' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
              }
            },
            smooth: true
          }]
        };
        this.myChart.setOption(option);

      },
    }
  }
</script>
<style lang="scss">
  .echarts-style {
    width: 100%;
    margin: 0 auto;
    height: 300px;
    margin-top: 20px;
    background-color: #fff;
  }
</style>
